<style lang="less">
.rank {
  // height:100%;
  .top {
    // position:fixed;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .setting {
      margin: 15px;
      font-size: 27px;
    }
    p {
      display: inline-block;
      margin: 10px;
    }
  }
  .main {
    // 文本缩进
    text-indent: 20px;
    // margin-top:20px;
    padding: 15px 10px;
    height: 100%;
    h1 {
      margin: 0px 0 20px 0;
      font-size: 33px;
    }
    p {
      // margin-bottom: 15px;
      padding: 10px;
    }
    .sidebar {
      width: 200px;
      height: 100%;
      background-color: red;
      position:fixed;
      top:40px;
      left:0;
      // display:none;
    }
  }
  .active {
    background-color: rgba(0, 0, 0,.8);
    color: #fff;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    flex-basis: 50%;
    width: 100%;
    height: 70px;
    background-color: pink;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 35px;
      height: 35px;
    }
    .contents {
      display: inline-block;
      font-size: 35px;
    }
  }
}
</style>

<template>
  <div class="rank">
    <div class="top">
      <router-link to="/index" active-class="active">
        <p>返回</p>
      </router-link>
      <div class="setting">
        <van-icon name="setting-o" />
      </div>
    </div>
    <div class="main" v-bind:class="{ active: isActive }" >
      <div class="content" v-html="con"></div>

      <div class="sidebar"></div>
    </div>

    <div class="bottom">
      <a class="contents">
        <!-- 目录 -->
        <van-icon name="description-o" />
      </a>
      <img
        src="../../public/image/day.png"
        alt=""
        v-show="day"
        @click="toggle"
      />
      <img
        src="../../public/image/dark.png"
        alt=""
        v-if="dark"
        @click="toggle"
      />
    </div>
  </div>
</template>

<script>
import { BookContent } from "../api/index";

export default {
  created() {
    let { source_uuid, content_uuid } = this.$route.query;
    console.log(source_uuid, content_uuid);
  },

  data() {
    return {
      day: false,
      dark: true,
      isActive: false,
      con: "",
    };
  },
  methods: {
    toggle() {
      this.day = !this.day;
      this.dark = !this.dark;
      this.isActive = !this.isActive;
    },
    getBookContent(sid, cid) {
      BookContent({
        source_uuid: sid,
        content_uuid: cid,
      }).then((res) => {
        // console.log(res)
        this.con = res.data.content;
        // console.log(this.con)
      });
    },
  },
  mounted() {
    const sid = this.$route.query.source_uuid;
    const cid = this.$route.query.content_uuid;
    this.getBookContent(sid, cid);
  },
};
</script>
